<template>
	<div>  
		<div class=" project_bk"></div>
		<div class="main" >
			<el-row type="flex" justify="center"  align="middle">
				<el-col :span="24" :offset="0">
					<h2 class=" animate__animated animate__fadeInRight">UserBook</h2>
				</el-col>
			</el-row>
			<el-row type="flex" justify="center" class="animate__animated animate__fadeInDown">
				<el-col :span="10" >
					<el-input
						placeholder="请输入内容"
						v-model="ser"
						clearable
						>
						<el-button slot="append" icon="el-icon-search" @click="search(1)"></el-button>
					</el-input>
				</el-col>
				<!-- <el-col :span="1" >
					<el-button type="success"  icon="el-icon-plus" @click="iscreate = !iscreate" v-if="!iscreate"></el-button>
				</el-col> -->
			</el-row>
			
			<el-row :gutter="40"  type="flex" justify="center" align="middle"  v-loading="loading" style="margin-top: 50px;">
				<el-col :span="18" :offset="0" style="display: flex; flex-wrap: wrap;">
					<el-col  :xs="12" :sm="12" :md="12" :lg="8" :xl="8"   v-for="(item,n) in userData" :key="n">
						<el-card  class="activityCard animate__animated animate__fadeInUp"  :style="getStyle()">
								
							<!-- <el-button class="button"  @click="Mprint(item)" >{{item}}</el-button> -->
						<div slot="header" style="display: block;" >
							<el-row>
								<el-col :span="20"><h3>{{item.name}}</h3></el-col>
								<el-col :span="4">
									<el-avatar size="50" :src="item.avatar"></el-avatar>
								</el-col>
							</el-row>
							<span style="font-size: 15px;">性别：{{item.sex}}</span>
							<br>
							<span style="font-size: 15px;">联系方式：{{item.connect}}</span>
						    <!-- <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button> -->
						 </div>
						 <div>
							 <span style="font-size: 15px;">学号：{{item.stuId}}</span>
							 <br>
							<!-- <el-image :src="img" @click="Mprint(item.name)" style="border-radius: 20px; margin-top: 50px;margin-bottom: 30px;"></el-image> -->
							<span style="font-size: 15px;">学院：{{item.academy}}</span>
							<br>
							<span style="font-size: 15px;">专业：{{item.major}}</span>
							<br>
							<el-divider></el-divider>
							<span style="font-size: 15px;">简介：<br>{{item.introduction}}</span>
						</div>
						</el-card>
					</el-col>
				</el-col>
				
			</el-row>
			<el-row v-if="!isSearch" type="flex"  align="middle" justify="center">
				<el-col :span="5" style="text-align: center;">
					<el-pagination
						@current-change="getUser()"
						background
						page-size="9"
						layout="prev, pager,next "
						:total="total">
					</el-pagination>
				</el-col>
			</el-row>	
			<el-row v-else class="animate__animated animate__fadeInUp">
				<el-col :span="24" style="text-align: center;">
					<div style="margin-top:2%;margin-bottom: 2%;;">
					<el-pagination
						@current-change="search"
						background
						page-size="9"
						layout="prev, pager,next "
						:total="total">
					</el-pagination>
					</div>
				</el-col>
			</el-row>
		</div>
		
		
	</div>
	
</template>

<script>
	export default {
		props: {},
		data: function() {
			var checkNum = (rule, value, callback) => {
				// 
				if (!value) {
				  return callback(new Error('人数不能为空'));
				}else if(Number.isNaN(Number(value))){
					return callback(new Error('必须为数字'));
				}if(1>value || 20<value){
					return callback(new Error('必须在1-20'));
				}if(!Number.isInteger(Number(value))){
					return callback(new Error('必须为整数'));
				}else{
					callback();
					}
			};
			return {
				ser:"",
				isSearch:false,
				total:10,
				userData:[],
				color:"",
				loading:false
			}
		},
		methods: {
			search:async function(n){
				var self = this
				this.isSearch = true
				this.loading = true;
				let res = await this.text(this.$api.getSearchNumUser+"?name="+this.ser)
					
					if (res.code === 200) {
						this.total = res.data.num
						this.$message({
							message: '找到'+res.data.num+"个用户",
							type: 'success'
							});
					}else{
						this.$message.error('请求失败或者接口返回失败');
					}
				let b = (n-1) * 9
				let e = n * 9
				res = await this.text(this.$api.searchUser+"?name="+this.ser+"&page="+b+"&num="+e)
				
				if (res.code === 200) {
					this.userData.length=0
					res.data.forEach(e => {
						this.userData.push({
							name : e.name,
							id : e.id,
							sex : e.sex,
							academy : e.academy,
							major : e.major,
							stuId : e.stuId,
							userName : e.userName,
							introduction : e.introduction,
							connect : e.connect,
						})
					});
				}else{
						this.$message.error('请求失败或者接口返回失败');
				} 
				this.loading = false;
			},
			 getStyle:function(){
			    let r = Math.floor(Math.random()*220);
			    let g = Math.floor(Math.random()*220);
			    let b = Math.floor(Math.random()*220);
			    return 'background-color: rgba('+ r +','+ g +','+ b +',0.8)';
			  },
			getUser: async function(n){
							this.loading = true;
							
							
							let res = await this.text(this.$api.getNumUser)
								
								if (res.code === 200) {
									this.total = res.data.num
									
								}else if (res.code === 50014) {
					
					this.$message.error('用户权限不足');
				}else{
									this.$message.error('请求失败或者接口返回失败');
								}
							
							this.userData.length = 0
							let b = (n-1) * 10
							let e = n * 10
							res = await this.text(this.$api.userBook+"?page="+b+"&num="+e)
							console.log(res)
							if (res.code === 200) {
								res.data.forEach(e=>{
									this.userData.push({
										name : e.name,
										id : e.id,
										sex : e.sex,
										academy : e.academy,
										major : e.major,
										stuId : e.stuId,
										userName : e.userName,
										introduction : e.introduction,
										connect : e.connect,
										avatar: this.$api.picTemplate + e.avatar
									})
								})
							 
							} else if (res.code === 50014) {
					
					this.$message.error('用户权限不足');
				}else{
								this.$message.error('请求失败或者接口返回失败');
							}
							this.loading = false;
						}
					},
		async created() {
                // 在created发送请求
                // 1. 可以获取到data中的数据
                // 2. 不能操作DOM的
                //
				if(!this.$GLOBAL.isInsider){
					this.$router.push("login")
					this.$message.error('用户权限不足');
				}else{
					
					this.getUser(1)
				}
				
				
                   
            },
	}
		
	
</script>

<style scoped>
  @import url("../assets/style/book.css");
  
</style>